import React from 'react'
import { Select, Space, Form } from 'antd';

const { Option } = Select;
const bigClass = ['Zhejiang', 'Jiangsu'];
const smallClass = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};

export default function GoodsCategory(props) {
  const { comSort } = props
  const [cities, setCities] = React.useState(smallClass[bigClass[0]]);
  const [secondCity, setSecondCity] = React.useState(smallClass[bigClass[0]][0]);

  const handleProvinceChange = value => {
    setCities(smallClass[value]);
    setSecondCity(smallClass[value][0]);
  };

  const onSecondCityChange = value => {
    setSecondCity(value);
  };
  return (

    <Space>
      <Form.Item>
        <Select placeholder='请选择' style={{ width: 120 }} onChange={handleProvinceChange}>
          {bigClass.map(province => (
            <Option key={province}>{province}</Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item>
        <Select style={{ width: 120 }} placeholder='请选择' onChange={onSecondCityChange}>
          {cities.map(city => (
            <Option key={city}>{city}</Option>
          ))}
        </Select>
      </Form.Item>
    </Space>

  )
}
